import React, { Component } from 'react';
import axios from "axios";
import CommodityPage from '../common/Commodity';
import "./index.css";
import { Row, Col, Layout } from 'antd';
import Main from '../common/Main';
const { Content, Sider } = Layout;
class Classification extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classificationId: 1,
            isShowCommdity: false
        };
    }
    onClassificationChange(id) {
        this.setState({
            classificationId: id
        });
    }
    showCommdity(id) {
        this.setState({
            isShowCommdity: true,
            commodity: {}
        })
    }
    hideCommdity() {
        this.setState({
            isShowCommdity: false
        })
    }
    render() {
        return (
            <Main>
                <Layout className="classification">
                    <Sider width={100} style={{ background: '#fff' }}>
                        <ClassificationList onClick={(id) => this.onClassificationChange(id)} classificationId={this.state.classificationId} />
                    </Sider>
                    <Layout>
                        <Content>
                            <CommodityList classificationId={this.state.classificationId} onClick={(id) => this.showCommdity(id)} />
                        </Content>
                    </Layout>
                    <CommodityPage data={this.state.commdity} show={this.state.isShowCommdity} onHide={() => this.hideCommdity()} />
                </Layout>
            </Main>
        )
    }
}
class ClassificationList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            selectId: 1
        };
    }
    componentDidMount() {
        var self = this;
        axios.get("./data/classification.json", {}).then(
            (res) => {
                var data = res.data;
                self.setState({ list: data.result });
                if (data.result.length > 0) {
                    self.setState({
                        selectId: data.result[0]
                    })
                }
            }
        )
    }
    isActive(id) {
        return id === this.props.classificationId ? "active" : "";
    }
    getList() {
        var list = this.state.list, arr = [];
        for (var i = 0, l = list.length; i < l; i++) {
            arr.push(<li value={list[i].id} key={i} className={this.isActive(list[i].id)} onClick={(e) => this.onSelect(e)}>{list[i].name}</li>);
        }
        return arr;
    }
    onSelect(e) {
        var id = parseInt(e.target.getAttribute("value"), 10);
        if (id !== this.state.selectId) {
            this.setState({
                selectId: id
            })
            this.props.onClick(id);
        }
    }
    render() {
        return (
            <ul className="classification-list">
                {this.getList()}
            </ul>
        )
    }
}
class CommodityList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
    }
    componentDidMount() {
        var self = this;
        axios.get("./data/hotCommodityList.json", { classificationId: this.props.classificationId }).then(
            (res) => {
                var data = res.data;
                self.setState({ list: data.result });
            }
        )
    }
    getList() {
        var list = this.state.list, arr = [];
        for (var i = 0, l = list.length; i < l; i++) {
            arr.push(<Commodity commodity={list[i]} key={i} onClick={(id) => this.props.onClick(id)} />);
        }
        return arr;
    }
    render() {
        return (
            <div className="commodityMain">
                <Row className="commodityList">
                    {this.getList()}
                </Row>
            </div>
        )
    }
}
class Commodity extends Component {
    render() {
        return (
            <Col span={12} className="commodity" onClick={() => this.props.onClick(this.props.commodity.id)}>
                <div className="img">
                    <img src={this.props.commodity.imgPath} />
                </div>
                <div className="name">{this.props.commodity.name}</div>
                <div className="desc">{this.props.commodity.desc}</div>
                <div className="price">￥{this.props.commodity.price}</div>
            </Col>
        )
    }
}
export default Classification;